<template>
    <div class="container">
        <div class="warp">
            <ComNav title="热门新碟" moreLink="/discover/playlist/" moreText="" :showIcon="false" />
            <NewDiscList :albums="albums" :limit="10" />
            <ComNav :keywords="['全部', '华语', '欧美', '韩国', '日本']" title="全部新碟" moreLink="/discover/playlist/" moreText=""
                :showIcon="false" />
            <NewDiscList :albums="albums" />
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" prev-text="上一页" next-text="下一页" :total="1000" />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ComNav from '../components/ComNav.vue'
import NewDiscList from '../components/NewDiscList.vue'
const albums = [
    {
        id: 272648328,
        name: "ADHD",
        cover: "http://p1.music.126.net/QyWXMSUhw85RjoYZB4LQbw==/109951171008379039.jpg?param=130y130",
        artists: [
            { id: 12024274, name: "KAFE_HU咖啡胡" }
        ],
        artistNames: ["KAFE_HU咖啡胡"]
    },
    {
        id: 272136228,
        name: "BEDROOM TAPE",
        cover: "http://p1.music.126.net/LuBOSYUP2IHyD6fYAIATQg==/109951170987616238.jpg?param=130y130",
        artists: [
            { id: 12914544, name: "马伯骞Victor Ma" },
            { id: 13911452, name: "ATM Hanson" },
            { id: 1132392, name: "马思唯" },
            { id: 33072389, name: "Dove鸽子" },
            { id: 12127362, name: "GALI" },
            { id: 3689, name: "李玖哲" },
            { id: 12110173, name: "THOME" },
            { id: 12198387, name: "艾志恒Asen" }
        ],
        artistNames: [
            "马伯骞Victor Ma",
            "ATM Hanson",
            "马思唯",
            "Dove鸽子",
            "GALI",
            "李玖哲",
            "THOME",
            "艾志恒Asen"
        ]
    },
    {
        id: 272139951,
        name: "Essence of Reverie",
        cover: "http://p1.music.126.net/U90NX0KBDsCQAGBdl7bNkA==/109951170987987873.jpg?param=130y130",
        artists: [
            { id: 1047070, name: "BAEKHYUN" }
        ],
        artistNames: ["BAEKHYUN"]
    },
    {
        id: 272024425,
        name: "光明离不开黑暗",
        cover: "http://p1.music.126.net/UeU4pHy7r2zfIkiAiUkw-w==/109951170984127734.jpg?param=130y130",
        artists: [
            { id: 29303235, name: "PSY.P" }
        ],
        artistNames: ["PSY.P"]
    },
    {
        id: 270259571,
        name: "Gen",
        cover: "http://p1.music.126.net/WUnvOpilV2xERukTyW9BlQ==/109951170907785333.jpg?param=130y130",
        artists: [
            { id: 14242, name: "星野源" }
        ],
        artistNames: ["星野源"]
    },
    {
        id: 271588119,
        name: "穷病",
        cover: "http://p1.music.126.net/n7M0zs1aaBTKy6gc_25OTA==/109951170973958374.jpg?param=130y130",
        artists: [
            { id: 13112601, name: "Wiz_H张子豪" }
        ],
        artistNames: ["Wiz_H张子豪"]
    },
    {
        id: 271392229,
        name: "Sincerely,",
        cover: "http://p1.music.126.net/GetSLPmM4N_74lIPbOdELQ==/109951170962089557.jpg?param=130y130",
        artists: [
            { id: 1070056, name: "Kali Uchis" }
        ],
        artistNames: ["Kali Uchis"]
    },
    {
        id: 271178850,
        name: "一脉相承Hood & Family",
        cover: "http://p1.music.126.net/vy21tVbQy1v7daqsVtVjUw==/109951170955172263.jpg?param=130y130",
        artists: [
            { id: 12493701, name: "布瑞吉Bridge" }
        ],
        artistNames: ["布瑞吉Bridge"]
    },
    {
        id: 269428668,
        name: "ADHD 贪吃蛇",
        cover: "http://p1.music.126.net/uDVRKLOYRdrCRD5cTVghYQ==/109951170851174214.jpg?param=130y130",
        artists: [
            { id: 187462, name: "小老虎" }
        ],
        artistNames: ["小老虎"]
    },
    {
        id: 267786859,
        name: "STUPID POP SONGS",
        cover: "http://p1.music.126.net/9r50-BhduCERNbyOxx_raw==/109951170722562446.jpg?param=130y130",
        artists: [
            { id: 5196, name: "陶喆" }
        ],
        artistNames: ["陶喆"]
    }
];

</script>

<style lang="scss" scoped>
.container {
    width: 980px;
    min-height: 700px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid #d3d3d3;
    border-width: 0 1px;

    .warp {
        padding: 40px;

        .pagination {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 20px 0;
            text-align: center;
        }
    }
}
</style>